<template>
	<table>
      <tr>
        <th>欢迎光临水果店</th>
      </tr>
      <tr>
        <td v-html="fruit"></td>
      </tr>
      <tr>
        <td>请输入你要购买的数量 <input type="text" v-model.number="num" /></td>
      </tr>
      <tr>
        <td><button @click="clos(num)">结账买单</button></td>
      </tr>
      <tr>
        <td>结账单：总价{{ price }}元,折后价{{ discount }}元,省了{{ price - discount }}元</td>
      </tr>
    </table>
</template>

<script>
	export default {
		data() {
			return {
				fruit: '榴莲10元/斤，8折',
				num: 0,
				price: 0,
				discount: 0,
			}
		},
		methods: {
			clos(num) {
				if (!num) return alert('购买数量不能为空！')
				this.price = 10 * num
				this.discount = 8 * num
			}
		}
	}
</script>

<style>

</style>
